<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="Stylesheet" type="text/css" href="css/ui.jqgrid.css" />
        <link rel="Stylesheet" type="text/css" href="css/black-tie/jquery-ui-1.8.14.custom.css" />
        <link rel="Stylesheet" type="text/css" href="css/Site.css" />
        <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>

        <script type="text/javascript" src="js/i18n/grid.locale-en.js"></script>
        <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
        
        <script type="text/javascript">
            $(document).ready( function () {
$("#Models").jqGrid({
        url: 'php/AjaxHandler.php?cmd=Loadplanes',
        datatype: 'json',
        height: "auto", 
        colNames:['makeID','CategoryID', 'Category', 'Name', 'Comment'],
        colModel:[ 
            {name:'makeID', width:10, hidden: true}, 
            {name:'CategoryID', hidden: true}, 
            {name:'CatName', index: 'CatName', width:110, sortable : true},
            {name:'Name', index: 'Name', width:110, sortable : true},
            {name:'Comment', index: 'Comment', width:90, sortable : true}
        ],
        pager: '#pager',
        rowNum:10,
        rowList:[10,20,30],
        sortname: 'FD',
        sortorder: 'Name',
        viewrecords: true, 
        gridview: true,
        caption:"Models"
    });
    $("#Models").jqGrid('navGrid','#pager',
        {edit:false,add:false,del:false}
    );
            });
        </script>
    </head>
    <body>
        <div><table id="Models"></table></div>
        <div id="pager"></div>
    </body>
</html>
